<div class="pad-def bg-default bor-b-def">
  <h2 class="no-margin">成绩管理</h2>
</div>
<div class="">
  <div class="wrapper-md bg-white">
    <form class="form-horizontal over-hide clearfix pad-def  bor-def mar-b-def">
      <div class="form-group col-lg-4 col-sm-6 col-xs-12 ">
        <label class="control-label col-xs-12 col-sm-3">学号：</label>
        <p class="col-xs-12 col-sm-9">
          <input class="form-control" placeholder="学号关键字"
                 [(ngModel)]="searchParams.studentId" name="studentId"/>
        </p>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3 ">姓名：</label>
        <p class="col-xs-12 col-sm-9 ">
          <input class="form-control" placeholder="姓名关键字"
                 [(ngModel)]="searchParams.studentName" name="studentName"/>
        </p>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">专业：</label>
        <p class="col-xs-12 col-sm-9 ">
          <select class="form-control" [(ngModel)]="searchParams.majorId" name="majorId">
            <option value="{{major.majorId}}" *ngFor="let major of majorOptions">{{major.major}}</option>
          </select>
        </p>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">课程：</label>
        <p class="col-xs-12 col-sm-9 ">
          <select class="form-control" [(ngModel)]="searchParams.courseId" name="courseId">
            <option value="{{course.courseId}}" *ngFor="let course of courseOptions">{{course.courseName}}</option>
          </select>
        </p>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3"
        >年级：</label>
        <p class="col-xs-12 col-sm-9">
          <select class="form-control" [(ngModel)]="searchParams.gradeId" name="grade">
            <option value="{{grade.gradeId}}" *ngFor="let grade of gradeOptions">{{grade.name}}</option>
          </select>
        </p>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">分数：</label>
        <div class="col-xs-12 col-sm-9">
          <p class="input-group">
            <input class="form-control" placeholder="最小" [(ngModel)]="searchParams.min" name="min"/>
            <span class="input-group-addon">-</span>
            <input class="form-control" placeholder="最大" [(ngModel)]="searchParams.max" name="max" />
          </p>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">

        <p class="col-xs-12 col-lg-9 col-sm-offset-3">
          <button class="btn btn-primary" (click)="search()">搜索</button>
          <button class="btn btn-default" (click)="resetParams()">重置</button>
        </p>
      </div>
    </form>
    <p-dataTable #dt [value]="tableData"  scrollHeight="200px" emptyMessage="暂无数据" >
      <p-header>
        <div class="ui-helper-clearfix text-left">
          <a class="btn btn-sm btn-info pull-left" (click)="showAddModal()"><i class="fa fa-plus-square"></i>录入成绩</a>
          <a class="btn btn-sm btn-info pull-right" (click)="dt.exportCSV()" ><i class="fa fa-file-o"></i>导出CSV</a>
        </div>
      </p-header>
      <p-column field="courseId" header="id"></p-column>
      <p-column field="studentId" header="学号"></p-column>
      <p-column field="studentName" header="姓名"></p-column>
      <p-column field="major" header="专业"></p-column>
      <p-column field="gradeName" header="年级"></p-column>
      <p-column field="courseName" header="课程"></p-column>
      <p-column field="score" header="分数"></p-column>
      <p-column styleClass="col-button text-center">
        <ng-template pTemplate="header">
          操作
        </ng-template>
        <ng-template  let-score="rowData" pTemplate="body">
          <div class="btn-group" style="min-width: 200px">
            <button type="button" class="btn btn-xs btn-primary " (click)="showEditModal(score)">编辑</button>
            <button type="button" class="btn btn-xs btn-danger " (click)="remove(score.scoreId)">删除</button>
          </div>
        </ng-template>
      </p-column>
      <p-footer>
        <paginator *ngIf="page.count" [(index)]="page.pageIndex" [(pageSize)]="page.pageSize" [count]="page.count" size="sm" (onChangePage)="query()"></paginator>
      </p-footer>
    </p-dataTable>
  </div>
</div>

<modal [(visible)]="modalAdd.visible">
  <modal-header>录入成绩</modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">学号：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="学号" [(ngModel)]="modalAdd.data.studentId" name="studentId" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">课程：</label>
        <div class="col-sm-9">
          <select class="form-control" [(ngModel)]="modalAdd.data.courseId" name="courseId">
            <option *ngFor="let course of modalAdd.courseOptions" [value]="course.courseId">{{course.courseName}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">成绩：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="成绩" [(ngModel)]="modalAdd.data.score" name="score" />
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" [disabled]="modalAdd.submitted" (click)="add()">{{modalAdd.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeAddModal()">取消</button>
  </modal-footer>
</modal>
<modal [(visible)]="modalEdit.visible">
  <modal-header>修改成绩</modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">学号：</label>
        <div class="col-sm-9" class="form-control-static">
          {{modalEdit.data.studentId}}
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">课程：</label>
        <div class="col-sm-9" class="form-control-static">
          {{modalEdit.data.courseName}}
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">成绩：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="成绩" [(ngModel)]="modalEdit.data.score" name="score" />
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" [disabled]="modalEdit.submitted" (click)="update()">{{modalEdit.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeEditModal()">取消</button>
  </modal-footer>
</modal>
